import React from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { FormattedMessage, injectIntl } from 'react-intl';
import { IntlConsumer } from '@folio/stripes/core';
import {
  TextField,
  Row,
  Col,
  Button,
  Select
} from '@folio/stripes/components';
import {  IfPermission } from '@folio/stripes/core';
import css from './style.css';

class SearchForm extends React.Component {
  static propTypes = {
    handleSubmit: PropTypes.func.isRequired,
    initialValues:PropTypes.object,
    toModel:PropTypes.func,
    cleanSearch:PropTypes.func
  }

  fieldChange = () => {
    const {
      handleSubmit
    } = this.props;
    this.setState(() => {
      handleSubmit();
    });
  }

  render() {
    const dictionary = {
      notice:[
        { id: '', name: 'none', desc: 'ui-party.messageTemplate.data.notice.empty' },
        { id: 1, name: 'weixin', desc: 'ui-party.messageTemplate.data.notice.weixin' },
        { id: 2, name: 'sms', desc: 'ui-party.messageTemplate.data.notice.textMessage' },
        { id: 3, name: 'email', desc: 'ui-party.messageTemplate.data.notice.email' }
      ],
      type:[
        { id: '', name: 'none', desc: 'ui-party.messageTemplate.data.type.empty' },
        { id: 1, name: 'enrollSuccess', desc: 'ui-party.messageTemplate.data.type.enrollSuccess' },
        { id: 2, name: 'signInSuccess', desc: 'ui-party.messageTemplate.data.type.signInSuccess' },
        { id: 3, name: 'auditPass', desc: 'ui-party.messageTemplate.data.type.auditPass' },
        { id: 4, name: 'auditReject', desc: 'ui-party.messageTemplate.data.type.auditReject' }
      ],
      state:[
        // { id: '', name: 'none', desc: 'ui-party.messageTemplate.data.type.empty' },
        { id: 1, name: 'enable', desc: 'ui-party.messageTemplate.data.state.enable' },
        { id: 0, name: 'disable', desc: 'ui-party.messageTemplate.data.state.disable' }
      ]
    };
    const {
      handleSubmit,
      toModel,
      initialValues,
      cleanSearch
    } = this.props;

    const noticeOptions = ((dictionary || {}).notice || []).map(g => {
      const selected = (initialValues || {}).notice === g.id;
      return (
        <FormattedMessage key={g.id} id={g.desc}>
          {(message) => <option selected={selected} value={g.id}>{message}</option>}
        </FormattedMessage>
      );
    });

    const typeOptions = ((dictionary || {}).type || []).map(g => {
      const selected = (initialValues || {}).type === g.id;
      return (
        <FormattedMessage key={g.id} id={g.desc}>
          {(message) => <option selected={selected} value={g.id}>{message}</option>}
        </FormattedMessage>
      );
    });

    return (
      <IntlConsumer>
        {intl => (
          <form
            data-test-form-page
            id="form-search"
            onSubmit={handleSubmit}
          >
            <Row>
              <Col className={css.inputCalss}>
                <Field
                  component={TextField}
                  placeholder={intl.formatMessage({ id: 'ui-party.messageTemplate.name' })}
                  name="name"
                  onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                />
              </Col>
              <Col className={css.inputCalss}>
                <Field
                  component={Select}
                  name="notice"
                  selectClass={css.selectWidth}
                  onChange={this.fieldChange}
                >
                  {noticeOptions}
                </Field>
              </Col>
              <Col className={css.inputCalss}>
                <Field
                  component={Select}
                  name="type"
                  selectClass={css.selectWidth}
                  onChange={this.fieldChange}
                >
                  {typeOptions}
                </Field>
              </Col>
              <Col className={css.inputCalss}>
                <Button type="submit">
                  <FormattedMessage id="ui-party.search" />
                </Button>
                <IfPermission perm={"ui-party.notify.template.manage.view.add"}>
                  <Button
                      onClick={() => {
                        toModel('/party/notify/template/add');
                      }}
                  >
                    <FormattedMessage id="ui-party.add" />
                  </Button>
                </IfPermission>
               </Col>
            </Row>
          </form>
        )}
      </IntlConsumer>
    );
  }
}
export default reduxForm({
  form: 'MessageTemplateSearchForm',
  navigationCheck: true,
  enableReinitialize: true,
})(SearchForm);
